import {Card, Input, Select,Space,Form,Checkbox,Button,message} from "antd";
import {Link} from "react-router-dom";
import './CreateMemberLevel.less'
import TextArea from "antd/es/input/TextArea";
import http from "../../../utils/http";
import {useNavigate} from "react-router";

const CreateMemberLevel=()=>{
    const navigate = useNavigate();
    const [form] = Form.useForm();
    let data = {
        consumeRule:'',
        discount:'',
        name:'',
        quantityRule:'',
        regTimeRule:'',
        overview:''
    }
    form.setFieldsValue(data);

    const addSubmit = () => {
        let flag = false;
        for (let key in data){
            if(data[key] == ''){
                flag = true;
                break;
            }
        }
        if(flag){
            message.warning('请填写完整！');
        }else {
            http({
                url:'api/user/insertLevel',
                method:'post',
                params:data
            }).then(res=>{
                console.log(res)
                if (res.code == 200){
                    message.success(res.msg);
                    navigate('/home/MemberTag');
                }
            })
        }
    }

    return(
        <div className='Cml-bigBox'>
            <Card  className='Cm-Card'>
                <div>
                    <h1>
                        等级信息
                    </h1>
                    <hr/>
                    <div className='header'>
                        <div className='level-from'>
                            <Form form={form} initialValues={data}>
                                <Form.Item name={'name'} label='等级名称' rules={[{required:true,message:'请输入等级名称'}]}>
                                    <Input
                                        value={data.name}
                                        onChange={(ev)=>{data.name = ev.target.value}}
                                        placeholder="请输入等级名称"
                                        style={{width:'260px'}}
                                    />
                                </Form.Item>
                                <Form.Item name={'overview'} label='等级描述' rules={[{required:true,message:'请输入等级描述'}]}>
                                    <TextArea
                                        showCount
                                        value={data.overview}
                                        placeholder={'请输入等级描述'}
                                        maxLength={100}
                                        style={{ width: 260 }}
                                        onChange={(ev)=>{data.overview = ev.target.value}} />
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
                <div>
                    <h1>
                      升级条件
                    </h1>
                    <hr />
                    <div className='middle'>
                        <div>
                            <Form form={form} initialValues={data} className='middle-form'>
                                <Form.Item name={'consumeRule'} label='消费金额' rules={[{required:true,message:'请输入消费金额'}]}>
                                    <Input
                                        value={data.consumeRule}
                                        placeholder={'请输入消费金额'}
                                        addonAfter="元"
                                        style={{width:'260px'}}
                                        onChange={(ev)=>{data.consumeRule = ev.target.value}}
                                    />
                                </Form.Item>
                                <Form.Item name={'quantityRule'} label='指定商品件数' rules={[{required:true,message:'请输入指定商品件数'}]}>
                                    <Input
                                        value={data.quantityRule}
                                        placeholder={'请输入指定商品件数'}
                                        addonAfter="件"
                                        style={{width:'260px'}}
                                        onChange={(ev)=>{data.quantityRule = ev.target.value}}
                                    />
                                </Form.Item>
                                <Form.Item name={'regTimeRule'} label="注册天数" rules={[{required:true,message:'请输入注册天数'}]}>
                                    <Input
                                        value={data.regTimeRule}
                                        placeholder={'请输入注册天数'}
                                        addonAfter="天"
                                        style={{width:'260px'}}
                                        onChange={(ev)=>{data.regTimeRule = ev.target.value}}
                                    />
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
                <div>
                    <h1>
                       等级权益
                    </h1>
                    <hr />
                    <div className='middle-level'>
                        <Form form={form} initialValues={data}>
                            <Form.Item name={'discount'} label='等级权益' rules={[{required:true,message:'请输入等级权益'}]}>
                                <Input
                                    value={data.discount}
                                    placeholder={'请输入等级权益'}
                                    addonAfter="折"
                                    style={{width:'260px'}}
                                    onChange={(ev)=>{data.discount = ev.target.value}}
                                />
                            </Form.Item>
                        </Form>
                    </div>
                </div>
                <div className='footer'>
                    <div className={'footer-button'}>
                        <div><Button type={'primary'} onClick={addSubmit}>保存</Button></div>
                        <div><Link to={'/home/MemberLevel'}><Button>取消</Button></Link></div>
                    </div>
                </div>
            </Card>
        </div>
    )
}
export default CreateMemberLevel;